<template>
    <div class="flash">
        <div class="bag">
            <div class="img">
                <img src="../../../../../assets/硬币找零/daizi.jpg" alt="">
            </div>
            <div class="text">待找零钱：{{ bagV }}分</div>
            <div class="text">还需零钱：{{ bagL }}分</div>
            <div class="text">已找零钱：{{ bagP }}分</div>
            <el-button plain @click="open">设置待找零钱数</el-button>
        </div>
        <el-button v-if="ftag === 0" @click="handleClick">点击查看最少硬币数组合</el-button>
        <el-tag v-else class="tag" type="info">最少硬币数组合是：{{ s }}</el-tag>
        <div class="objects">
            <div v-for="(item, index) in objects" :key="index">
                <div class="object">
                    <div class="img">
                        <img src="../../../../../assets/硬币找零/yingbi.jpg" alt="">
                    </div>
                    <div class="text">面额：{{ item.v }}分</div>
                    <div class="caozuo">
                        <el-button @click="handleClickJian(item)">-</el-button>
                        <div>{{ item.p }}</div>
                        <el-button @click="handleClickAdd(item)">+</el-button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from "vue";
import { ElMessage, ElMessageBox } from 'element-plus'

let ftag = ref(0);
let bagV = ref(0);
let bagL = ref(0);
let bagP = ref(0);
let objects = ref([
    {
        v: 1,
        p: 0,
    },
    {
        v: 2,
        p: 0,
    },
    {
        v: 5,
        p: 0,
    },
    {
        v: 6,
        p: 0,
    },
]);

//动态规划 -- 硬币找零问题
function minCoins(coins, total, n) {
    var T = [];
    for (let i = 0; i < n; i++) {
        T[i] = []
        for (let j = 0; j <= total; j++) {
            if (j == 0) {
                T[i][j] = 0;
                continue;
            }
            if (i == 0) {
                T[i][j] = j / coins[i]; //硬币找零一定要有个 最小面额1，否则会无解
            } else {
                if (j >= coins[i]) {
                    T[i][j] = Math.min(T[i - 1][j], 1 + T[i][j - coins[i]])

                } else {
                    T[i][j] = T[i - 1][j];
                }
            }
        }
    }
    findValue(coins, total, n, T);
    return T;
}
var s = ref([]); //存储组合结果
function findValue(coins, total, n, T) {
    var i = n - 1, j = total;
    while (i > 0 && j > 0) {
        if (T[i][j] != T[i - 1][j]) {
            //锁定位置,确定i,j值，开始找构成结果的硬币组合。 其实根据这种计算方法，只需要考虑最右边那一列，从下往上推。
            //console.log(T[i][j]);
            break
        } else {
            i--;
        }
    }
    while (i >= 0 && j > 0) {
        s.value.push(coins[i]);
        j = j - coins[i];
        if (j <= 0) {
            break; //计算结束，退出循环
        }
        //如果 i == 0,那么就在第 0 行一直循环计算，直到 j=0即可
        if (i > 0) {
            //console.log(i);
            while (T[i][j] == T[i - 1][j]) {
                i--;
                if (i == 0) {
                    break;
                }
            }
        }
    }
    console.log(s.value);
    //可以把数组s return 回去
}


var coins = [1, 2, 5, 6];
var total = ref(0);
var n = coins.length
// console.log(minCoins(coins, total, n));

// 设置待找零签数
const open = () => {
    ElMessageBox.prompt('请输入待找零钱数', '设置', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern:
            /[\w!#$%&'*+/=?^_`{|}~-]/,
        inputErrorMessage: '请输入待找零钱数',
    })
        .then(({ value }) => {
            bagV.value = value;
            bagL.value = value;
            bagP.value = 0;
            s.value = [];
            ftag.value = 0;
            total.value = value;
            objects.value.forEach(element => {
                element.p = 0;
            });
            minCoins(coins, value, n);
            ElMessage({
                type: 'success',
                message: `设置待找零钱数为:${value}`,
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '返回演示',
            })
        })
}

// 查看组合
const handleClick = () => {
    ftag.value = 1;
    console.log(ftag.value);
}

// 加数量
const handleClickAdd = (item) => {
    if (bagL.value - item.v < 0) {
        ElMessage({
            type: 'warning',
            message: '已经超过需要找的零钱数',
        })
    }
    else {
        item.p++;
        bagL.value -= item.v;
        bagP.value += item.v;
        if (bagL.value === 0) {
            ElMessage({
                type: 'success',
                message: '你已经成功找完了零钱',
            })
        }
    }
}
const handleClickJian = (item) => {
    if (item.p != 0) {
        item.p--;
        bagL.value += item.v;
        bagP.value -= item.v;
    } else {
        ElMessage({
            type: 'warning',
            message: '该面额硬币数量为0',
        })
    }
}
</script>

<style scoped lang="scss">
.flash {
    display: flex;
    justify-content: space-between;
    height: 300px;

    .bag {
        display: flex;
        flex-direction: column;
        height: 200px;
        align-items: center;

        .text {
            text-align: center;
        }

        .img {
            width: 150px;
            height: 150px;

            img {
                width: 150px;
                height: 150px;
            }
        }
    }

    .tag {
        cursor: pointer;
    }

    .objects {
        display: flex;
        flex-wrap: wrap;

        .object {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 100px;
            height: 200px;

            .text {
                text-align: center;
            }

            .caozuo {
                display: flex;
                align-items: center;
            }

            .img {
                width: 70px;
                height: 70px;

                img {
                    width: 70px;
                    height: 70px;
                }
            }
        }
    }
}
</style>